<script setup>
import {onMounted, ref} from 'vue';
import axios from '../request.js';
import {ElMessage} from "element-plus";

const exchangeItems = ref([]);
const exchangeItemsId = ref()
const id = ref();
const isShowEdit = ref(false);
const isShowDelete = ref(false);
const isShowAdd = ref(false);
const exchangeItemsRecords = ref();
const editExchangeItems = ref({
  exchangeItemsId: '',
  title: '',
  description: '',
  price: '',
  type: '',
  showdialog: false,
});

const addExchangeItems = ref({
  exchangeItemsId: '',
  title: '',
  description: '',
  price: '',
  type: '',
  showdialog: false,
});

const count = ref(3)
const loading = ref(false)
const noMore = ref(false)

onMounted(() => {
  getExchangeItems();
})
//获取积分兑换表
const getExchangeItems = () => {
  axios.get("/points/getExchangeItems").then(resp => {
    exchangeItems.value = resp.date;
  })
}

//修改积分兑换表商品
const changeExchangeItems = (id1,id2) => {
  exchangeItemsId.value = id1;
  id.value = id2;
  isShowEdit.value = true;
}
//确认修改奖品信息
const changeExchangeItemsYes = () => {
  isShowEdit.value = false;
  editExchangeItems.value.exchangeItemsId = exchangeItemsId.value;
  if (exchangeItemsId.value!==undefined){
    axios.post("/pointsManager/changeExchangeItems", editExchangeItems.value).then(resp => {
      if (resp.code === 200) {
        ElMessage.success("修改成功")
      } else {
        ElMessage.error("修改失败")
      }
      getExchangeItems();
    })
  }else if (id.value!==undefined){
    axios.post("/pointsManager/changeCoupons",null,{
      params: {
        id: id.value,
        price: editExchangeItems.value.price,
      }
    }).then(resp => {
      if (resp.code === 200) {
        ElMessage.success("修改成功")
      } else {
        ElMessage.error("修改失败")
      }
      getExchangeItems();
    })
  }

}

//删除积分兑换表
const deleteExchangeItems = (id1, id2) => {
  exchangeItemsId.value = id1;
  id.value = id2;
  isShowDelete.value = true;
}
//确认删除积分兑换表
const deleteLotteryItemYes = () => {
  isShowDelete.value = false;
  if (exchangeItemsId.value !== undefined){
    axios.post("/pointsManager/deleteExchangeItems", null, {
      params: {
        exchangeItemsId: exchangeItemsId.value
      }
    }).then(resp => {
      if (resp.code === 200) {
        ElMessage.success("删除成功")
      } else {
        ElMessage.error("删除失败")
      }
      getExchangeItems();
    })
  }else if (id.value !== undefined){
    axios.post("/pointsManager/deleteCoupons", null, {
      params: {
        id: id.value
      }
    }).then(resp => {
      if (resp.code === 200) {
        ElMessage.success("删除成功")
      } else {
        ElMessage.error("删除失败")
      }
      getExchangeItems();
    })
  }
}

//确认增加积分兑换表
const addExchangeItemsYes = () => {
  isShowAdd.value = false;
  axios.post("/pointsManager/addExchangeItems", addExchangeItems.value).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("增加成功")
    } else {
      ElMessage.error("增加失败")
    }
    getExchangeItems();
  })
}

const getExchangeItemsRecords =()=>{
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false

    if (count.value >= exchangeItemsRecords.value.length) {
      noMore.value = true;
    }
  }, 2000)

  axios.get("/pointsManager/getExchangeItemsRecords").then(resp => {
    exchangeItemsRecords.value = resp.date;
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="font-size: 18px">管理积分兑换表</el-header>
      <el-main>
        <el-table :data="exchangeItems" style="width: 100%">
          <el-table-column prop="exchangeItemsId" label="ID" width="50px">
            <template #default="scope">
              <div v-if="scope.row.exchangeItemsId">{{ scope.row.exchangeItemsId }}</div>
              <div v-else>{{ scope.row.id }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="description" label="描述" width="300px"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="type" label="类型">
            <template #default="scope">
              <div v-if="scope.row.type">{{ scope.row.type }}</div>
              <div v-else>{{scope.row.member}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button @click="changeExchangeItems(scope.row.exchangeItemsId,scope.row.id )" type="primary" plain>编辑</el-button>
              <el-button @click="deleteExchangeItems(scope.row.exchangeItemsId,scope.row.id )" type="danger" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog v-model="isShowEdit" title="请输入要修改的内容" width="500">
          <el-form>
            <el-form-item label="标题">
              <el-input v-model="editExchangeItems.title" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="editExchangeItems.description" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="editExchangeItems.price" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="editExchangeItems.type" autocomplete="off"/>
            </el-form-item>
          </el-form>
          <span style="color:#d82121;">！！请填入你要修改部分的内容，不修改的可以不填</span><br>
          <span style="color:#d82121;">！！注意,优惠券类商品可以且仅可以修改价格，修改其他内容无效</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowEdit=false">取消</el-button>
              <el-button type="primary" @click="changeExchangeItemsYes()">确认</el-button>
            </div>
          </template>
        </el-dialog>

        <el-dialog v-model="isShowDelete" title="删除奖品" width="500">
          <span style="color:#d82121;">注意！！删除后无法恢复，请谨慎操作！！！</span><br>
          <span style="color:#d82121;">注意！！优惠券商品删除并不是从数据库删除，只会修改数据库中该商品的状态为已删除，不会删除该商品！！！</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowDelete=false">取消</el-button>
              <el-button type="primary" @click="deleteLotteryItemYes">确认</el-button>
            </div>
          </template>
        </el-dialog>


        <el-button @click="isShowAdd = true" type="primary" style="margin-top: 20px;">新增奖品</el-button>
        <el-dialog v-model="isShowAdd" title="新增奖品">
          <el-form>
            <el-form-item label="ID">
              <el-input v-model="addExchangeItems.exchangeItemsId" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="addExchangeItems.title" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="addExchangeItems.description" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="价值">
              <el-input v-model="addExchangeItems.price" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="addExchangeItems.type" autocomplete="off"/>
            </el-form-item>
            <span style="color:#d82121;">注意，兑换商品ID不能重复！！！</span><br>
            <span style="color:#d82121;">注意，优惠券类商品无法添加！！！</span>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowAdd = false">取消</el-button>
              <el-button @click="addExchangeItemsYes" type="primary">保存</el-button>
            </div>
          </template>
        </el-dialog>

        <br><el-button @click="getExchangeItemsRecords" type="primary" style="margin-top: 20px;">兑换历史</el-button>
        <div class="infinite-list-wrapper" style="overflow: auto">
          <li v-for="(item, index) in exchangeItemsRecords" :key="index" class="list-item">
            <span>{{ item.username }} 兑换了{{ item.title }}</span>
          </li>
          <p v-if="loading">Loading....</p>
          <p v-if="noMore">No more</p>
        </div>

      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  padding: 20px;
}

.infinite-list-wrapper {
  margin-top: 30px;
  width: 600px;
  height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}

.list-item span{
  margin: 0 15px 0 15px;
}
</style>